{% extends "base.html" %}

{% block title %}工单详情{% endblock %}

{% block head %}
{{ super() }}
{% endblock %}

{% block content %}
<!-- 页面头 -->
<section class="content-header">
  <!--头部标题-->
  <h1>
    工单详情
    <!--    <small>advanced tables</small>-->
  </h1>
  <!--面包屑-->
  <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
    <li><a href="/">工单审批</a></li>
    <li class="active">详情</li>
  </ol>
</section>

<!-- 页面内容 -->
<section class="content">
  <div class="row">
    <div class="col-xs-12">


      <!--表格1-->
      <div class="box">
        <div class="box-header">
          <h3 class="box-title">更新服务列表</h3>
        </div>
        <div class="box-body">
          <form id="form">
            <!--隐藏字段-->
            <input class="hidden" type="text" name="job_id" value="{{job.id}}">
            <div class="table-responsive">
              <table id="example1" class="table table-condensed">
                <thead>
                <tr>
                  <th>集群</th>
                  <th>命名空间</th>
                  <th>服务</th>
                  <th>版本</th>
                </tr>
                </thead>
                <tbody>
                {% for svc in services %}
                <tr>
                  <td>{{ cdict[svc.cluster_id | int] }}</td>
                  <td>{{ svc.namespace }}</td>
                  <td>{{ svc.microservice }}</td>
                  <td>{{ svc.image }}</td>
                </tr>
                {% endfor %}
                </tbody>
              </table>
            </div>


            <div class="form-group">
              <label for="creator">申请人：</label>
              <input type="text" class="form-control" id="creator" value="{{ job.creator }}" readonly>
            </div>

            <div class="form-group">
              <label for="comment">更新说明：</label>
              <textarea id="comment" name="comment" class="form-control" rows="2" readonly>{{ job.comment }}</textarea>
            </div>

            {% if job.deny_reason %}
            <div class="form-group">
              <label for="deny_reason">拒绝理由：</label>
              <textarea id="deny_reason" name="deny_reason" class="form-control" rows="2"
                        readonly>{{ job.deny_reason }}</textarea>
            </div>
            {% endif %}


            {% if session['role'] != 'user' %}
            <button id="approve" type="button" class="btn btn-success">同意</button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button id="silenceApprove" type="button" class="btn btn-info">静默发布</button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button id="deny" type="button" class="btn btn-danger" data-toggle="modal" data-target="#denyModal">拒绝
            </button>
            {% endif %}


          </form>


        </div>
      </div>

    </div>
  </div>
</section>
<!-- /.页面内容 -->

<!--  拒绝理由 -->
<div class="modal fade" id="denyModal" tabindex="-1" role="dialog" aria-labelledby="denyModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="denyModalLabel">请填写拒绝理由</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="message-text" class="control-label">拒绝理由:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-warning" id="modalDenyBtn">确认</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}


{% block script %}
<script type="text/javascript">
    $(function () {

        // 按钮单机时执行
        $('#approve').click(function () {
            $.get('/api/job/{{job.id}}/approve?silence=false', function (data) {
                if (data === 'error') {
                    bootbox.alert('集群自动更新失败，请联系集群管理员!');
                } else if (data === 'success') {
                    bootbox.alert('审批通过，自动发布完成!', function () {
                        setTimeout(function () {
                            location.href = '/'
                        }, 250)
                    });
                }
            });
        })

        // 按钮单机时执行
        $('#silenceApprove').click(function () {
            $.get('/api/job/{{job.id}}/approve?silence=true', function (data) {
                if (data === 'error') {
                    bootbox.alert('集群自动更新失败，请联系集群管理员!');
                } else if (data === 'success') {
                    bootbox.alert('审批通过，自动发布完成!', function () {
                        setTimeout(function () {
                            location.href = '/'
                        }, 250)
                    });
                }
            });
        })

        $('#modalDenyBtn').click(function (e) {
            e.preventDefault()
            console.log($('#message-text').val())
            var data = {
                deny_reason: $('#message-text').val(),
            }

            $.ajax({
                method: 'POST',
                url: '/api/job/{{job.id}}/deny',
                data: JSON.stringify(data),
                dataType: 'text',
                headers: {'Content-Type': 'application/json; charset=utf-8'},
                success: function (result) {
                    $('#denyModal').modal('hide')
                    if (result === 'error') {
                        bootbox.alert('出现服务器内部错误');
                    } else if (result === 'success') {
                        bootbox.alert('已拒绝发布!', function () {
                            setTimeout(function () {
                                location.href = '/'
                            }, 250)
                        });
                    }
                }
            })

        })
    })
</script>
{% endblock %}